<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>御码数据可视化项目</title>
  <link rel="stylesheet" href="./fonts/icomoon.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 主体内容区域 -->
  <div class="view">

    <!-- 左侧大盒子 -->
    <div class="leftBox">
      <!-- 顶部第一个盒子 -->
      <div class="top_one_Left borderImg">
        <div class="item">
          <h4>2,190</h4>
          <p>
            <span class="icon-dot" style="color: #006cff;"></span>
            设备总数
          </p>
        </div>

        <div class="item">
          <h4>2,190</h4>
          <p>
            <span class="icon-dot" style="color: #006cff;"></span>
            设备总数
          </p>
        </div>


        <div class="item">
          <h4>2,190</h4>
          <p>
            <span class="icon-dot" style="color: #006cff;"></span>
            设备总数
          </p>
        </div>


        <div class="item">
          <h4>2,190</h4>
          <p>
            <span class="icon-dot" style="color: #006cff;"></span>
            设备总数
          </p>
        </div>
      </div>

      <!-- 左侧第二个盒子 -->
      <div class="top_two_left borderImg">

        <!-- 标题盒子 -->
        <div class="title">
          <h4 class="active">故障设备监控</h4>
          <div class="line"></div>
          <h4>异常设备监控</h4>
        </div>

        <!-- 子标题 -->
        <div class="subtitle">
          <span>故障时间</span>
          <span>设备地址</span>
          <span>异常代码</span>
        </div>

        <!-- 内容盒子 -->
        <div class="content">

          <!-- 故障监控设备内容盒子 -->
          <div class="item" style="display: block;">
            <ul>
              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>

              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>
              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>
              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>
              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>
              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>
              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>
              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>
              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>
              <li>
                <span>202411</span>
                <span>大连御码科技甘井子区</span>
                <span>10010</span>
              </li>
              
            </ul>
          </div>

          <!-- 异常设备监控盒子 -->
          <div class="item" style="display: none;">
            <ul>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
              <li>
                <span>202410</span>
                <span>大连御码科技甘井子区</span>
                <span>10101</span>
              </li>
            </ul>
          </div>

        </div>
      </div>


      <!-- 左侧第三个盒子 -->
      <div class="top_three_left borderImg">
          <div class="title">
              <h4>定位分布统计</h4>
          </div>

          <div class="content">
               <!-- 左侧饼状图 -->
              <div class="leftPie"></div>

               <!-- 右侧公共数据展示容器 -->
              <div class="rightPublicBox">
                   <div class="item">
                       <h3>320,11</h3>
                       <p>
                         <span class="icon-dot" style="color: #ed3f35;"></span>
                         点位总数
                       </p>
                   </div>

                   <div class="item">
                    <h3>418</h3>
                    <p>
                      <span class="icon-dot" style="color: yellow;"></span>
                      本月新增
                    </p>
                </div>
              </div>
          </div>


      </div>

    </div>


    <!-- 中间大盒子 -->
    <div class="middleBox">
        <!-- 顶部标题区域 -->
        <div class="title">
             <h3>
              <span class="icon-cube" style="color: #68d8fe;"></span>
              设备数量统计
            </h3>
        </div>

        <!-- 中国地图区域 -->
        <div class="map"></div>

        <!-- 柱状图区域 -->
        <div class="lineBox  borderImg">
            <div class="title">
              <h4>全国用户总量统计</h4>
            </div>

            <!-- 内容区域 -->
            <div class="content">

              <!-- 柱状图区域 -->
             <div class="leftBar"></div>

              <!-- 右侧公共数据展示容器 -->
             <div class="rightPublicBox">
                  <div class="item">
                      <h3>320,11</h3>
                      <p>
                        <span class="icon-dot" style="color: #ed3f35;"></span>
                        点位总数
                      </p>
                  </div>

                  <div class="item">
                   <h3>418</h3>
                   <p>
                     <span class="icon-dot" style="color: yellow;"></span>
                     本月新增
                   </p>
               </div>
             </div>
            </div>
        </div>

         
    </div>



    <!-- 右边大盒子 -->
    <div class="rightBox">
        <!-- 右侧顶部第一个盒子-->
        <div class="right_top1 borderImg">

             <!-- 标题区域 -->
             <div class="title">
                 <a href="javascript:;" class="active">365天</a>
                 <div class="line"></div>
                 <a href="javascript:;">90天</a>
                 <div class="line"></div>
                 <a href="javascript:;">30天</a>
                 <div class="line"></div>
                 <a href="javascript:;">24小时</a>
             </div>


              <!-- 内容区域 -->
              <div class="content">
                  <div class="item" style="opacity: 1;">
                      <div class="leftItem">
                          <h3>1,987</h3>
                          <p>
                            <span class="icon-dot" style="color: red;"></span>
                            订单量
                          </p>
                      </div>
                      <div class="rightItem">
                           <h3>3834</h3>
                           <p>
                             <span class="icon-dot" style="color: yellow;"></span>
                             销售额(万元)
                           </p>
                      </div>
                  </div>

                  <div class="item" style="opacity: 0;">
                    <div class="leftItem">
                        <h3>1,007</h3>
                        <p>
                          <span class="icon-dot" style="color: red;"></span>
                          订单量
                        </p>
                    </div>
                    <div class="rightItem">
                         <h3>2834</h3>
                         <p>
                           <span class="icon-dot" style="color: yellow;"></span>
                           销售额(万元)
                         </p>
                    </div>
                  </div>

                  <div class="item" style="opacity: 0;">
                    <div class="leftItem">
                        <h3>987</h3>
                        <p>
                          <span class="icon-dot" style="color: red;"></span>
                          订单量
                        </p>
                    </div>
                    <div class="rightItem">
                         <h3>1834</h3>
                         <p>
                           <span class="icon-dot" style="color: yellow;"></span>
                           销售额(万元)
                         </p>
                    </div>
                  </div>

                  <div class="item" style="opacity: 0;">
                    <div class="leftItem">
                        <h3>87</h3>
                        <p>
                          <span class="icon-dot" style="color: red;"></span>
                          订单量
                        </p>
                    </div>
                    <div class="rightItem">
                         <h3>834</h3>
                         <p>
                           <span class="icon-dot" style="color: yellow;"></span>
                           销售额(万元)
                         </p>
                    </div>
                  </div>

              </div>
        </div>

        <!-- 右侧顶部第二个盒子 -->
        <div class="right_top2 borderImg">
             <!-- 顶部标题区域 -->
            <div class="title">
                <h3>销售额统计</h3>
                <div class="line"></div>
                <a href="javascript:;" class="active" data-myname="year">年</a>
                <a href="javascript:;" data-myname="quarter">季</a>
                <a href="javascript:;" data-myname="month">月</a>
                <a href="javascript:;" data-myname="week">周</a>
            </div>

            <!-- 统计图内容区域 -->
            <div class="content">
                <!-- 折线统计图盒子 -->
                <div class="rightBox_lineBox"></div>
            </div>

        </div>


        <!-- 右侧顶部第三个盒子 -->
        <div class="right_top3">

            <!-- 左侧子元素 -->
            <div class="leftitem  borderImg">
                <div class="title">
                    <h3>渠道分布</h3>
                </div>
                 <!-- 内容区域 -->
                <div class="content">
                    <div class="item">
                        <h3>39%</h3>
                        <p>
                          <span class="icon-plane" style="color:#006cff"></span>
                          机场
                        </p>
                    </div>
                    <div class="item">
                      <h3>39%</h3>
                      <p>
                        <span class="icon-plane" style="color:#006cff"></span>
                        机场
                      </p>
                    </div>

                    <div class="item">
                      <h3>39%</h3>
                      <p>
                        <span class="icon-plane" style="color:#006cff"></span>
                        机场
                      </p>
                    </div>

                    <div class="item">
                      <h3>39%</h3>
                      <p>
                        <span class="icon-plane" style="color:#006cff"></span>
                        机场
                      </p>
                    </div>
                </div>
            </div>

            <!-- 右侧子元素 -->
            <div class="rightitem borderImg">
                <div class="title">
                   <h3>一季度销售进度</h3>
                </div>
                <!-- 显示当前饼状图 -->
                <div class="content">
                  <div class="priBox"></div>
                  <p>50%</p>
                </div>

                <!-- 底部区域 -->
                <div class="footer">
                  <div class="item">
                    <h3>39%</h3>
                    <p>
                      <span class="icon-plane" style="color:#006cff"></span>
                      机场
                    </p>
                  </div>
                  <div class="item">
                    <h3>39%</h3>
                    <p>
                      <span class="icon-plane" style="color:#006cff"></span>
                      机场
                    </p>
                  </div>
                </div>
                


            </div>

        </div>
        
        <!-- 右侧最后一个盒子 -->
        <div class="right_top4 borderImg">
           <div class="title">
               <span>全国热榜</span>
               <span>各省热销</span>
               <span>//近30日//</span>
           </div>

           <div class="content">
              <ul class="list1">
                <li><span class="icon-cup1" style="color: #d93f36"></span><span>可爱多</span></li>
                <li><span class="icon-cup2" style="color: #68d8fe"></span><span>可爱多</span></li>
                <li><span class="icon-cup3" style="color: #4c9bdf"></span><span>可爱多</span></li>
              </ul>

              <ul class="list2">
                 <li class="active">
                   <span>北京</span>
                   <span>25,179</span>
                   <span class="icon-up" style="color: #d93f36;"></span>
                 </li>
                 <li>
                  <span>北京</span>
                  <span>25,179</span>
                  <span class="icon-up" style="color: #d93f36;"></span>
                </li>
                <li>
                  <span>南京</span>
                  <span>25,179</span>
                  <span class="icon-down" style="color: green;"></span>
                </li>
                <li>
                  <span>河北</span>
                  <span>25,179</span>
                  <span class="icon-up" style="color: #d93f36;"></span>
                </li>
                <li>
                  <span>北京</span>
                  <span>25,179</span>
                  <span class="icon-down" style="color: green;"></span>
                </li>
              </ul>

              <ul class="list3">
                  <li><span>八喜</span><span>6,808</span><span class="icon-up" style="color: #d93f36;"></span></li>
                  <li><span>八喜</span><span>6,808</span><span class="icon-up" style="color: #d93f36;"></span></li>
                  <li><span>八喜</span><span>6,808</span><span class="icon-up" style="color: #d93f36;"></span></li>
                  <li><span>八喜</span><span>6,808</span><span class="icon-up" style="color: #d93f36;"></span></li>
                  <li><span>八喜</span><span>6,808</span><span class="icon-up" style="color: #d93f36;"></span></li>
                  <li><span>八喜</span><span>6,808</span><span class="icon-up" style="color: #d93f36;"></span></li>
              </ul>
           </div>

        </div>


    </div>
  </div>
  
  <!-- 引入对应的插件的js文件 -->
  <script src="./js/echarts.min.js"></script>
  <script src="./js/china.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>